<template>

  <div id="app" style="overflow: hidden;height: 100%;">

    <el-row class="container" style="height: 100%" >
      <el-header class="header">
        <span class="title">H-toolbox</span>
      </el-header>
      <el-col :span="3"  style="height: inherit;width: 220px;" class="toolbox-aside">
        <el-menu default-active="/activePublic" class="el-menu-vertical-demo" :router="true" style="height: inherit">
          <el-menu-item index="/activePublic">
            <icon name="file-zip-o" class="awesome-icon"></icon>
            <span>文件服务</span>
          </el-menu-item>
          <el-menu-item index="/taskManager" >
            <i class="el-icon-date"></i>
            <span>任务管理</span>
          </el-menu-item>
          <el-submenu index="/authUserManager">
            <template slot="title">
              <icon name="users" class="awesome-icon"></icon>
              <span>权限管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/authUserManager">
                <icon name="user" class="awesome-icon"></icon>
                <span>用户管理</span>
              </el-menu-item>
              <el-menu-item index="/roleManager">

                <icon name="user-secret" class="awesome-icon"></icon>
                <span>角色管理</span>
              </el-menu-item>
              <el-menu-item index="/authManager">
                <icon name="vcard" class="awesome-icon"></icon>
                <span>权限管理</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/sysManager">
            <template slot="title">
              <icon name="gear" class="awesome-icon"></icon>
              <span>系统管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/dictManager">
                <icon name="book" class="awesome-icon"></icon>
                <span>数据字典</span>
              </el-menu-item>
              <el-menu-item index="/logManager">
                <icon name="file-text" class="awesome-icon"></icon>
                <span>日志管理</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

        </el-menu>
      </el-col>
      <el-col :span="21"   class="toolbox-content">
        <div style="overflow: auto;height: 100%;">
          <transition name="fade">
            <router-view class="view"></router-view>
          </transition>
        </div>


      </el-col>
    </el-row>


  </div>
</template>

<script>

  import Vue from 'vue'
  import Element from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  import $ from 'jquery'

  Vue.use(Element)

  export default {
    name: 'app',
    data: function (){
      return {
        active:true,
        headerFixed : true
      }
    },
    created: function(){
      this.$router.push('/taskManager');
    },
    methods: {

    },
    watch: {
      '$route': function (to,from) {
        if(to.path == '/activePublic'){
          this.active = true ;
        }else if(to.path == '/taskManager'){
          this.active = false ;
        }
      }
    }
  }
</script>

<style>
  html{
    height: 100%;
  }
  body {
    height: 97%;
    position: relative;
    font-size: 14px;
    background-color: #fff;
  }
  body, th, td, button, input, select, textarea {
    font-family: "Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,"WenQuanYi Micro Hei",Verdana,sans-serif,"\5B8B\4F53";
    font-size: 12px;
    color: #333;
  }
  li .el-menu-item-group__title {
    display: none;
  }
  .container{
    border: 1px solid #eee;
  }
  .header {
    text-align: left;
    font-size: 36px ;
    background-color:#20a0ff
  }
  .toolbox-aside {
    border-top: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;

  }
  .el-menu {
    background-color: rgba(238,238,238,0.98) !important;
  }
  .toolbox-content {
    position: absolute;
    top: 60px;
    left: 220px;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
  }
  .toolbox-content-auto {
    position: absolute;
    top: 68px;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
  }
  span.title{
    color: white;
    vertical-align: middle;
    margin: 0;
    height: 100%;
  }
  .is-active .router-link{color:#20a0ff; }

  .el-menu-item .awesome-icon {
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    vertical-align: middle;
    }
  .bread{
    height: 30px;font-size: 15px;padding-top: 8px;background-color: #f5f5f5; padding-left: 10px
  }
</style>
